<template>
  <div>
    <ul class="goodsInfoList">
      <li class="goodsName">
        <div>
          <img src="../../../../assets/images/111.jpeg" alt="" />
          <p>{{ goodsName }}</p>
        </div>
      </li>
      <li class="size attrStyle">
        <span>{{ goodsSize }}</span>
      </li>
      <li class="price attrStyle">
        <span>¥ {{ goodsPrice }}</span>
      </li>
      <li class="count attrStyle">
        <span>{{ goodsCount }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "GoodsInfo",
  props: ["goodsName", "goodsSize", "goodsPrice", "goodsCount"],
};
</script>

<style lang="less" scoped>
.goodsInfoList {
  margin-bottom: 15px;
  overflow: hidden;
  li {
    float: left;
    line-height: 24px;
  }
  .goodsName {
    width: 522px;
    div {
        width: 422px;
      img {
        width: 32px;
        height: 42px;
        float: left;
      }
      p {
        height: 42px;
        margin-left: 10px;
        float: left;
      }
    }
  }
  .attrStyle {
    width: 124px;
    text-align: center;
    color: #999;
  }
  .price {
    width: 160px;
  }
  .count {
    text-align: right;
  }
}
</style>
